<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { get7DayDatas, DayType, ResultDatas } from './request'
import * as echarts from 'echarts';
import option from './request/options';
const chart = ref<any>();
const datas = ref<ResultDatas[]>();
onMounted(async () => {
  let results = await get7DayDatas('101010100', DayType.Three) as any;
  console.log('results', results);
  datas.value = results.data.daily as ResultDatas[];
  console.log('datas.value', datas.value);
  const mychart = echarts.init(chart.value, 'dark');
  let options = option();
  let dateArr: any = [];
  let tempMin: any = [];
  let tempMax: any = [];
  datas.value.forEach(cur => {
    dateArr.push(cur.fxDate);
    tempMin.push(cur.tempMin);
    tempMax.push(cur.tempMax);
  });
  console.log('dateArr', dateArr);

  options["xAxis"]["data"] = dateArr;
  options["series"][0]["data"] = tempMax;
  options["series"][1]["data"] = tempMin;
  options && mychart.setOption(options);
})
</script>

<template>
  <div class="container" data-tauri-drag-region>
    <div class="top" ref="chart"></div>
    <div class="bottom">
      <div class="item" v-for="(item, index) in datas" :key="index">
        <div class="temp-top">
          <div class="left">
            <i :class="`qi-${item.iconDay}`"></i>
            <div>{{ item.textDay }}</div>
          </div>
          <div class="right">
            <i :class="`qi-${item.iconNight}`"></i>
            <div>{{ item.textNight }}</div>
          </div>
        </div>
        <div class="div-bottom">{{ item.tempMin }}°C - {{ item.tempMax }}°C</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  border-radius: 8px;
  flex-direction: column;
  height: 100vh;
  background-image: url(./assets/star-sky.jpeg);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .top {
    width: 100vw;
    height: 360px;
  }

  .bottom {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    align-self: flex-end;
    padding: 20px;

    .div-bottom {
      border-top: 1px solid white;
      padding: 10px 0;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      flex: 1;
      height: 200px;
      background: hsla(0, 0%, 100%, .2);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      border-radius: 5px;

      i {
        font-size: 2rem;
      }

      .temp-top {
        display: flex;
        width: 100%;
        flex: 1;

        .left,
        .right {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .left {
          border-right: 1px solid white;
        }
      }
    }
  }
}
</style>
